<template>
  <view>
    <view class="inline-flex m-1 space-x-1" v-for="(item,index) in supplierList" :key="index">
      <u-tag @click="handleClick(item)" class="cursor-pointer" :text="item.name" :plain="item.id!==curValue"></u-tag>
    </view>
    <view class="inline-flex m-1 space-x-1">
      <u-tag v-if="supplierList.length<supplierTotal" plain @click="handleMore">
        <template #icon>
          <u-icon class="cursor-pointer" name="plus" color="#59ABFF"></u-icon>
        </template>
      </u-tag>
    </view>
  </view>
</template>
<script setup lang="ts">

import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";
import {computed, onMounted, ref} from "vue";
import api from "@/api";


const props = defineProps({
  value: {
    type: [String, Number],
    default: ''
  }
})

const emits = defineEmits(['update:value'])
const curValue = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:value', val)
  }
})

const productStore = useProductStore()
const {supplierList, supplierTotal} = storeToRefs(productStore)
const pageNo = ref(1)
const pageSize = ref(15)
onMounted(() => {
  supplierList.value = []
  getList()
})

const handleClick = (item: ISupplier) => {
  curValue.value = item.id as number
}

const handleMore = () => {
  if (supplierTotal.value > supplierList.value.length) {
    pageNo.value++
    getList()
  }
}
const getList = () => {
  api.supplier.queryList({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }).then((res: any) => {
    supplierList.value = supplierList.value.concat(res.data.data.records)
    supplierTotal.value = res.data.data.total
  })
}
</script>

<style scoped>
</style>